<template>
  <el-dialog
    :title="title"
    :visible.sync="localVisible"
    width="1000px"
    :close-on-click-modal="false"
    @close="handleDialogClose"
  >
    <div class="detail-container">
      <div class="detail-header">
        <h2 class="detail-title">{{ detailData.title }}</h2>
        <div class="detail-meta">
          <!--          <span>分类：{{-->
          <!--            detailData.type === 1 ? '社会资讯' :-->
          <!--            detailData.type === 2 ? '机关发文' :-->
          <!--            detailData.type === 3 ? '操作指南' : '未知分类'-->
          <!--          }}</span>-->
          <span>创建人：{{ detailData.updateBy }}</span>
          <span>创建时间：{{ detailData.createTime }}</span>
          <span>浏览量：{{ detailData.viewCount || 0 }}</span>
        </div>
      </div>

      <div class="detail-content" v-html="detailData.content" />

      <div v-if="detailData.list && detailData.list.length" class="detail-attachments">
        <h3>附件：</h3>
        <ul>
          <li v-for="(item, index) in detailData.list" :key="index">
            <a href="javascript:;" @click="downloadFile(item)">{{ item.name }}</a>
          </li>
        </ul>
      </div>
    </div>

    <div slot="footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 父组件传入的显示状态
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新闻详情'
    },
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 本地状态托管visible，避免直接修改props
      localVisible: this.visible
    }
  },
  watch: {
    // 监听父组件visible变化，同步到本地状态
    visible(newVal) {
      this.localVisible = newVal
    },
    // 监听本地状态变化，通知父组件
    localVisible(newVal) {
      this.$emit('update:visible', newVal)
    }
  },
  methods: {
    downloadFile(item) {
      this.$emit('download', item)
    },
    // 处理对话框关闭（X号、ESC等）
    handleDialogClose() {
      this.localVisible = false
      this.$emit('clearDetailData')
    },
    // 处理关闭按钮点击
    handleClose() {
      this.localVisible = false
      this.$emit('clearDetailData')
    }
  }
}
</script>

<style lang="scss" scoped>
/* 样式保持不变 */
.detail-container {
  padding: 10px 0;

  .detail-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;

    .detail-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 15px;
      font-weight: bold;
    }

    .detail-meta {
      font-size: 12px;
      color: #999;

      span {
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .detail-content{
    line-height: 1.8;
    color: #666;
  }
  ::v-deep .detail-content p{
    margin-bottom: 15px;
  }
  ::v-deep .detail-content p img {
    width: 100% !important;
  }

  .detail-attachments {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #eee;

    h3 {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
      font-weight: bold;
    }

    ul {
      list-style: none;
      padding: 0;

      li {
        margin-bottom: 8px;

        a {
          color: #1890ff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
